<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>贷款服务 - 虚拟银行系统</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
  <link rel="stylesheet" href="/css/main.css">
  <link rel="stylesheet" href="/css/loans.css">
  <style>
    /* 完全重写模态框样式 */
    #loan-application-modal {
      position: fixed;
      z-index: 9999;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      display: none;
    }
    
    .modal-dialog {
      position: relative;
      width: 600px;
      max-width: 90%;
      margin: 10vh auto;
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
    
    .modal-content {
      background-color: #fff;
      border-radius: 8px;
      overflow: hidden;
    }
    
    .modal-header {
      padding: 15px;
      border-bottom: 1px solid #eee;
      position: relative;
    }
    
    .modal-body {
      padding: 15px;
      max-height: 70vh;
      overflow-y: auto;
    }
    
    .modal-footer {
      padding: 15px;
      border-top: 1px solid #eee;
      text-align: right;
    }
    
    .modal-close {
      position: absolute;
      right: 15px;
      top: 15px;
      background: none;
      border: none;
      font-size: 20px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div class="app-wrapper">
    <!-- 顶部导航栏 -->
    <div id="top-navbar"></div>
    
    <div class="main-container">
      <!-- 侧边栏 -->
      <div id="sidebar"></div>
      
      <!-- 主内容区 -->
      <div class="content">
        <div class="dashboard-header">
          <div class="dashboard-welcome">
            <h1 class="dashboard-welcome-title">贷款服务</h1>
            <p class="dashboard-welcome-subtitle">满足您的资金需求，轻松贷款</p>
          </div>
        </div>
        
        <!-- 贷款标签页 -->
        <div class="loan-tabs">
          <div class="loan-tab active" data-tab="loan-products">贷款产品</div>
          <div class="loan-tab" data-tab="loan-records">我的贷款</div>
          <div class="loan-tab" data-tab="loan-calculator">贷款计算器</div>
        </div>
        
        <!-- 贷款内容区 -->
        <div class="loan-content active" id="loan-products">
          <div class="loan-products" id="loan-products-list">
            <div class="loader-container">
              <div class="loader"></div>
            </div>
          </div>
          
          <div class="card">
            <div class="card-header">
              <h3 class="card-title">贷款须知</h3>
            </div>
            <div class="card-body">
              <h4>申请条件</h4>
              <ul class="ml-4 mb-3">
                <li>年龄在18-60周岁之间</li>
                <li>具有稳定的职业和收入来源</li>
                <li>良好的信用记录和还款能力</li>
                <li>在本行开立账户</li>
              </ul>
              
              <h4>所需材料</h4>
              <ul class="ml-4 mb-3">
                <li>有效身份证明</li>
                <li>收入证明（如工资单、纳税记录等）</li>
                <li>资产证明（如存款证明、房产证明等）</li>
                <li>其他可能需要的补充材料</li>
              </ul>
              
              <h4>贷款流程</h4>
              <ol class="ml-4 mb-3">
                <li>在线提交申请</li>
                <li>系统审核</li>
                <li>审批结果通知</li>
                <li>签署贷款协议</li>
                <li>贷款发放</li>
                <li>按时还款</li>
              </ol>
              
              <h4>风险提示</h4>
              <p class="mb-2">借款人应根据自身还款能力合理借贷，避免过度负债。若不按时还款，您的信用记录可能受到影响，且可能需支付逾期费用。</p>
            </div>
          </div>
        </div>
        
        <!-- 我的贷款 -->
        <div class="loan-content" id="loan-records">
          <div class="loan-records" id="loan-records-list">
            <div class="loader-container">
              <div class="loader"></div>
            </div>
          </div>
        </div>
        
        <!-- 贷款计算器 -->
        <div class="loan-content" id="loan-calculator">
          <div class="loan-form-wrapper">
            <div class="card">
              <div class="card-header">
                <h3 class="card-title">贷款计算器</h3>
              </div>
              <div class="card-body">
                <div class="form-group">
                  <label class="form-label" for="loan-amount">贷款金额 (元)</label>
                  <div class="input-with-icon">
                    <i class="fas fa-yen-sign"></i>
                    <input type="number" id="loan-amount" class="form-control" placeholder="请输入贷款金额" min="1000" value="50000">
                  </div>
                </div>
                
                <div class="form-group">
                  <label class="form-label" for="loan-term">贷款期限</label>
                  <select id="loan-term" class="form-control">
                    <option value="12">1年 (12个月)</option>
                    <option value="24">2年 (24个月)</option>
                    <option value="36" selected>3年 (36个月)</option>
                    <option value="60">5年 (60个月)</option>
                    <option value="120">10年 (120个月)</option>
                    <option value="240">20年 (240个月)</option>
                    <option value="360">30年 (360个月)</option>
                  </select>
                </div>
                
                <div class="form-group">
                  <label class="form-label" for="interest-rate">年利率 (%)</label>
                  <div class="input-with-icon">
                    <i class="fas fa-percentage"></i>
                    <input type="number" id="interest-rate" class="form-control" placeholder="请输入年利率" min="0.1" step="0.01" value="4.35">
                  </div>
                </div>
                
                <div class="form-group">
                  <label class="form-label">还款方式</label>
                  <div class="radio-group">
                    <label class="radio-container">
                      <input type="radio" name="repayment-method" value="1" checked>
                      <span class="radio-label">等额本息</span>
                      <span class="radio-help-text">每月还款金额相同，本金逐月递增，利息逐月递减</span>
                    </label>
                    <label class="radio-container">
                      <input type="radio" name="repayment-method" value="2">
                      <span class="radio-label">等额本金</span>
                      <span class="radio-help-text">每月本金相同，利息逐月递减，总还款额逐月递减</span>
                    </label>
                  </div>
                </div>
                
                <button type="button" id="calculate-loan" class="btn btn-primary">计算</button>
                
                <div class="loan-calculator-results" id="loan-calculation-results" style="display: none;">
                  <div class="loan-calculator-result-item">
                    <div class="loan-calculator-result-value" id="monthly-payment">¥0.00</div>
                    <div class="loan-calculator-result-label">月付款额</div>
                  </div>
                  <div class="loan-calculator-result-item">
                    <div class="loan-calculator-result-value" id="total-payment">¥0.00</div>
                    <div class="loan-calculator-result-label">总还款额</div>
                  </div>
                  <div class="loan-calculator-result-item">
                    <div class="loan-calculator-result-value" id="total-interest">¥0.00</div>
                    <div class="loan-calculator-result-label">总利息</div>
                  </div>
                </div>
              </div>
            </div>
            
            <div class="loan-form-footer">
              <button type="button" id="apply-loan-btn" class="btn btn-primary btn-lg">申请贷款</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 贷款申请模态框 -->
  <div id="loan-application-modal">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">贷款申请</h4>
          <button type="button" class="modal-close" data-dismiss="modal">&times;</button>
        </div>
        <div class="modal-body">
          <div class="loan-steps">
            <div class="loan-step active" data-step="1">
              <div class="loan-step-icon">1</div>
              <div class="loan-step-text">填写申请</div>
            </div>
            <div class="loan-step" data-step="2">
              <div class="loan-step-icon">2</div>
              <div class="loan-step-text">确认信息</div>
            </div>
            <div class="loan-step" data-step="3">
              <div class="loan-step-icon">3</div>
              <div class="loan-step-text">提交成功</div>
            </div>
          </div>
          
          <div class="loan-step-content active" data-step="1">
            <form id="loan-application-form">
              <div class="form-group">
                <label class="form-label" for="app-loan-amount">贷款金额 (元)</label>
                <div class="input-with-icon">
                  <i class="fas fa-yen-sign"></i>
                  <input type="number" id="app-loan-amount" name="amount" class="form-control" placeholder="请输入贷款金额" min="1000" required>
                </div>
                <div class="form-help-text">最低1,000元，最高1,000,000元</div>
              </div>
              
              <div class="form-group">
                <label class="form-label" for="app-loan-term">贷款期限</label>
                <select id="app-loan-term" name="loanTerm" class="form-control" required>
                  <option value="12">1年 (12个月)</option>
                  <option value="24">2年 (24个月)</option>
                  <option value="36" selected>3年 (36个月)</option>
                  <option value="60">5年 (60个月)</option>
                  <option value="120">10年 (120个月)</option>
                </select>
              </div>
              
              <div class="form-group">
                <label class="form-label" for="app-loan-purpose">贷款用途</label>
                <select id="app-loan-purpose" name="purpose" class="form-control" required>
                  <option value="消费">消费</option>
                  <option value="教育">教育</option>
                  <option value="装修">装修</option>
                  <option value="旅游">旅游</option>
                  <option value="医疗">医疗</option>
                  <option value="经营">经营</option>
                  <option value="其他">其他</option>
                </select>
              </div>
              
              <div class="form-group">
                <label class="form-label">还款方式</label>
                <div class="radio-group">
                  <label class="radio-container">
                    <input type="radio" name="repaymentMethod" value="1" checked>
                    <span class="radio-label">等额本息</span>
                  </label>
                  <label class="radio-container">
                    <input type="radio" name="repaymentMethod" value="2">
                    <span class="radio-label">等额本金</span>
                  </label>
                </div>
              </div>
            </form>
          </div>
          
          <div class="loan-step-content" data-step="2">
            <div class="alert alert-info mb-4">
              <div class="alert-icon">
                <i class="fas fa-info-circle"></i>
              </div>
              <div>
                请确认以下贷款申请信息是否正确。提交后，系统将进行审核，一般在1-3个工作日内完成。
              </div>
            </div>
            
            <div class="loan-detail-info mb-4">
              <div class="loan-detail-item">
                <div class="loan-detail-label">贷款金额</div>
                <div class="loan-detail-value" id="confirm-loan-amount">¥50,000.00</div>
              </div>
              <div class="loan-detail-item">
                <div class="loan-detail-label">贷款期限</div>
                <div class="loan-detail-value" id="confirm-loan-term">36个月</div>
              </div>
              <div class="loan-detail-item">
                <div class="loan-detail-label">贷款用途</div>
                <div class="loan-detail-value" id="confirm-loan-purpose">消费</div>
              </div>
              <div class="loan-detail-item">
                <div class="loan-detail-label">还款方式</div>
                <div class="loan-detail-value" id="confirm-repayment-method">等额本息</div>
              </div>
              <div class="loan-detail-item">
                <div class="loan-detail-label">年利率</div>
                <div class="loan-detail-value" id="confirm-interest-rate">4.35%</div>
              </div>
              <div class="loan-detail-item">
                <div class="loan-detail-label">月还款金额</div>
                <div class="loan-detail-value" id="confirm-monthly-payment">¥1,480.00</div>
              </div>
              <div class="loan-detail-item">
                <div class="loan-detail-label">总还款金额</div>
                <div class="loan-detail-value" id="confirm-total-payment">¥53,280.00</div>
              </div>
              <div class="loan-detail-item">
                <div class="loan-detail-label">总利息</div>
                <div class="loan-detail-value" id="confirm-total-interest">¥3,280.00</div>
              </div>
            </div>
            
            <div class="form-group">
              <label class="checkbox-container">
                <input type="checkbox" id="confirm-agreement">
                <span class="custom-checkbox">
                  <i class="fas fa-check"></i>
                </span>
                <span>我已阅读并同意<a href="#" class="btn-link">《贷款服务协议》</a>和<a href="#" class="btn-link">《个人信息授权书》</a></span>
              </label>
            </div>
          </div>
          
          <div class="loan-step-content" data-step="3">
            <div class="text-center">
              <div class="mb-4">
                <i class="fas fa-check-circle text-success" style="font-size: 64px;"></i>
              </div>
              <h3 class="mb-2">申请提交成功</h3>
              <p class="mb-4">您的贷款申请已提交，请耐心等待审核结果。</p>
              
              <div class="alert alert-warning text-left">
                <div class="alert-icon">
                  <i class="fas fa-exclamation-triangle"></i>
                </div>
                <div>
                  <strong>温馨提示：</strong>
                  <ol class="ml-4 mb-0 mt-2">
                    <li>审核结果将通过手机短信和系统消息通知您</li>
                    <li>请保持手机畅通，以便我们联系您</li>
                    <li>您可以在"我的贷款"中查看申请进度</li>
                  </ol>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-light" data-dismiss="modal" id="loan-prev-btn" style="display: none;">上一步</button>
          <button type="button" class="btn btn-primary" id="loan-next-btn">下一步</button>
          <button type="button" class="btn btn-primary" id="loan-submit-btn" style="display: none;">提交申请</button>
          <button type="button" class="btn btn-primary" id="loan-done-btn" style="display: none;">完成</button>
        </div>
      </div>
    </div>
  </div>

  <!-- 脚本 -->
  <script src="/js/utils/Utils.js"></script>
  <script src="/js/components/Toast.js"></script>
  <script src="/js/services/ApiService.js"></script>
  <script src="/js/components/PageLayout.js"></script>
  <script src="/js/components/TopNavBar.js"></script>
  <script src="/js/components/SideBar.js"></script>
  <script src="/js/pages/loans.js"></script>
</body>
</html>
